<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:20:04
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\Calendar.vue
 * @Description: 日历插入组件
-->
<template>
  <div class="calendar">
    <Calendar @toAddDate="creatDate" :init="true" />
  </div>
  <div ref="refInsertComponent" style="display: none">
    <div class="flexibleDate filed_blank" :data-config="JSON.stringify(config)">{{ timestamp(dateVal) }}</div>
  </div>
</template>

<script setup lang="ts">
  import { Ref, ref, nextTick, reactive } from 'vue'
  // 接口约束
  import { IConfig } from '../../interface/page'
  // 引入公共组件
  import Calendar from '../../components/common/Calendar.vue' // 引入日期组件
  // 组件插入hooks
  import { useInsertComponent } from '../../hooks/useInsertComponent'
  const refInsertComponent: Ref<HTMLElement | null> = ref(null)
  // 引入时间转换公共函数
  import { timestamp } from '../../utils/index'
  const dateVal: Ref<Date> = ref(new Date()) // 初始化日期
  let config: IConfig = reactive({
    type: 'calendar',
    name: '',
    des: '日期',
    textVal: '',
    code: '',
    edit: true,
  })
  // 创建时间
  const creatDate = (flag: Ref<Date>): void => {
    config.textVal = timestamp(flag.value)
    dateVal.value = flag.value
    nextTick(() => {
      // 向电子病历页面插入的组件
      useInsertComponent(refInsertComponent.value as HTMLElement)
    })
  }
</script>

<style scoped lang="scss">
  .calendar {
    .calendar {
      box-shadow: none;
      padding: 0;
    }
  }
  .flexibleDate {
    display: inline-block;
  }
</style>
